<template>
    <el-container
        :class="['navbar-container', { scrolled: isScrolled }]"
        style="position: sticky; top: 0; left: 0; z-index: 9999"
        ref="navbarRef"
    >
        <div class="header">
            <div class="logo">
                <RouterLink to="/home"><strong style="color: white; font-size: larger">ASK</strong></RouterLink>
            </div>
            <div v-if="isMobile">
                <el-dropdown class="menu-icon" ref="dropdown" :hide-on-click="true">
                    <el-button>
                        <el-icon><Operation /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="item in menuList" :key="item.path">
                                <RouterLink :to="item.path" @click="closeDropdown" class="router-item" active-class="active" exact-active-class="active" >
                                    <el-icon><component :is="item.icon" /></el-icon>
                                    {{ item.label }}
                                </RouterLink>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="router" v-else>
                <RouterLink
                    v-for="item in menuList"
                    :key="item.path"
                    class="router-item"
                    active-class="active"
                    exact-active-class="active"
                    :to="item.path"
                >
                    <el-icon><component :is="item.icon" /></el-icon>
                    {{ item.label }}
                </RouterLink>
            </div>
        </div>
    </el-container>
</template>

<script setup lang="ts" name="NavBar">
    import { ref, onMounted, onUnmounted, nextTick } from 'vue';
    import { useRoute } from 'vue-router';
    import {
        Operation,
        HomeFilled,
        Menu,
        Search,
        TrendCharts,
        Grid,
        Document,
        Download,
        Phone,
        Histogram
    } from '@element-plus/icons-vue';
    import debounce from 'lodash/debounce';

    let isMobile = ref(window.innerWidth <= 768)
    const isScrolled = ref(false);
    const navbarRef = ref<HTMLElement | null>(null);
    const route = useRoute();

    const menuList = [
        { path: '/home', label: 'Home', icon: HomeFilled },
        { path: '/browse', label: 'Browse', icon: Menu },
        { path: '/search/none/none/none/Cellline/none', label: 'EcDNA Search', icon: Search, activeKey: 'ecDNA' },
        // { path: '/depmapExplore/analysis', label: 'Analysis Images', icon: TrendCharts, activeKey: 'depmapExplore' },
        { path: '/depmapExplore/none/none/none', label: 'Depmap Data', icon: Search, activeKey: 'depmapExplore' },
        { path: '/depmapExplore/cytoscape', label: 'Cytoscape', icon: Grid, activeKey: 'depmapExplore' },
        { path: '/manual', label: 'Manual', icon: Document },
        { path: '/download', label: 'Download', icon: Download },
        { path: '/contact', label: 'Contact', icon: Phone }
    ];

    const closeDropdown = () => {
        const dropdown = navbarRef.value?.querySelector('.el-dropdown') as any;
        if (dropdown) dropdown.hide();
    };

    // 吸顶检测监听
    const handleScroll = () => {
        isScrolled.value = window.scrollY > 0;
    };

    const handleResize = async () => {
        // 保证 DOM 已渲染
        await nextTick();
        const compOrEl = navbarRef.value as any;
        const root = compOrEl?.$el ?? compOrEl;
        if (!(root instanceof HTMLElement)) return;

        const containerWidth = root.clientWidth;
                // .router 内容宽度
        const routerEl = root.querySelector<HTMLElement>('.router');
        const contentWidth = routerEl?.scrollWidth ?? 0;
        // 当内容超出容器，或者窗口宽度小于某个阈值，都可以切换到移动端
        isMobile.value = contentWidth > containerWidth || window.innerWidth < 800;
    };

    const debouncedResize = debounce(handleResize, 200);


    onMounted(() => {
        window.addEventListener('scroll', handleScroll);
        window.addEventListener('resize', debouncedResize);
        handleScroll();
        handleResize();
    });

    onUnmounted(() => {
        window.removeEventListener('scroll', handleScroll);
        window.removeEventListener('resize', debouncedResize);
    });
</script>

<style scoped>
    a {
        text-decoration: none;
    }

    .navbar-container {
        transition: height 0.3s, background 0.3s;
        height: 80px;
        background: #333;
    }
    .navbar-container.scrolled {
        height: 60px;
        background: #222;
    }
    .header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        line-height: 60px;
        /* background: rgb(44, 62, 80); */
        align-items: center;
        height: 100%;
        padding: 0 10%;
    }
    .logo {
        color: white;
        display: flex;
        font-size: 24px;
    }
    .router {
        display: flex;
        gap: 20px;
    }
    .router-item {
        color: white;
        white-space: nowrap;     /* 图标+文字强制一行 */
        text-decoration: none;
    }
    .router-item.active {
        color: #98d14d;
        font-weight: bold;
    }

    .el-dropdown-menu .router-item {
        white-space: nowrap;
    }

    .menu-icon {
        display: flex;
        justify-content: center;
        color: white;
    }

    .navbar-container {
        transition: height 0.3s ease, background 0.3s ease;
        height: 60px;
        background: #333;
    }

    .navbar-container.scrolled {
        height: 50px;
        background: rgb(30, 45, 60);
        background: #222;
    }

    /* 适配 header 内容随高度同步调整 */
    .header {
        transition: height 0.3s ease, line-height 0.3s ease;
    }

    .navbar-container.scrolled .header {
        height: 50px;
        line-height: 50px;
    }

    /* logo 同步调整大小 */
    .logo {
        transition: font-size 0.3s ease, margin-left 0.3s ease;
    }

    .navbar-container.scrolled .logo {
        font-size: 90%;
        /* margin-left: 8%; */
    }

    /* router-item 字体和 padding 动画 */
    .router-item {
        transition: padding 0.3s ease, font-size 0.3s ease;
    }

    .navbar-container.scrolled .router-item {
        font-size: medium;
        padding: 0 4px;
    }

    /* dropdown 菜单不受 navbar 缩放影响，保持原位 */
    .dropdown-menu {
        top: 55px;
    }

    .navbar-container.scrolled .dropdown-menu {
        top: 45px;
    }
</style>
